<template>
  <el-scrollbar height="100vh">
    <div class="container">
      <el-affix :offset="1">
        <h1 class="title">地图缩放ZOOM</h1>
      </el-affix>
      <div id="map" class="map-x" ref="mapBox"></div>
      <el-row class="mb-4" style="margin-top: 20px;">
        <el-button type="primary" round @click="zoomIn()">放大</el-button>
        <el-button type="success" round @click="zoomOut()">缩小</el-button>
        <el-button type="warning" round>当前缩放等级：{{ zoom }}</el-button>
        <el-button type="warning" round>最小缩放等级：{{minZoom}}</el-button>
        <el-button type="warning" round>最大缩放等级：{{maxZoom}}</el-button>
      </el-row>
      <div class="codestyle"><Code /></div>
      <dl>
        <dt>地图分辨率：</dt>
        <dd>地图图像1像素宽度与实地距离的比值体现的是视图坐标系与地理坐标系之间的关系，每一个分辨率，有一个缩放等级。Openlayers最大支持29级分辨率，不是每种地图都有29级分辨率，一般最精细到20级(google、OSM)</dd>
        <p>方法：</p>
        <dt>map.getView()：获取当前视图</dt>
        <dt>map.getView().getZoom()：获取当前缩放级别</dt>
        <dt>map.getView().setZoom：设置缩放级别</dt>
      </dl>
      <el-backtop :right="100" :bottom="100" />
    </div>
  </el-scrollbar>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from 'vue-demi'
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import Code from './code.vue'
export default {
  setup () {
    const state = reactive({
      map: null,
      mapBox: ref(null),
      tian_di_tu_annotation: null, // 天地图文字标注
      tian_di_tu_road_layer: null, // 天地图路网
      zoom: 12,
      minZoom: 10,
      maxZoom: 14
    })

    const init = () => {
      state.tian_di_tu_annotation = new Tile({
        title: '天地图路网',
        source: new XYZ({
          url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=ab47b4591ab6e07e0530606eca973edd'
        })
      })

      state.tian_di_tu_road_layer = new Tile({
        title: '天地图文字标注',
        source: new XYZ({
          url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=ab47b4591ab6e07e0530606eca973edd'
        })
      })

      state.map = new Map({
        target: state.mapBox,
        layers: [state.tian_di_tu_annotation, state.tian_di_tu_road_layer],
        view: new View({
          projection: 'EPSG:4326', // 坐标系，有EPSG:4326和EPSG:3857
          center: [116.41400, 39.91500],
          zoom: state.zoom,
          minZoom: state.minZoom,
          maxZoom: state.maxZoom
        })
      })
    }
    // 放大1级
    const zoomIn = () => {
      const view = state.map.getView() // 获取当前视图
      const zoom = view.getZoom() // 获取当前缩放级别
      view.setZoom(zoom + 1)
      state.zoom = view.getZoom()
    }

    // 缩小1级
    const zoomOut = () => {
      const view = state.map.getView()
      const zoom = view.getZoom()
      view.setZoom(zoom - 1)
      state.zoom = view.getZoom()
    }

    onMounted(() => {
      init()
    })
    return {
      ...toRefs(state),
      zoomIn,
      zoomOut
    }
  },
  components: {
    Code
  }
}
</script>
<style lang="scss" scoped>
@import '../../css/main.scss';
</style>
